{extend name="layout/iframe" /}

{block name="content"}
<div class="row js-check-wrap" style="margin: 0;">
    <div class="col-lg-12">
        <div class="portlet light">
            <div class="box-header">
                <div class="row">
                    <div class="col-md-10">
                        <form id="searchForm" action="{$pageSize.url}" class="form" method="post">
                            <div class="form-inline">
                                <select id="croptype" name="croptypeId" class="form-control"></select>
                                <select id="crop" name="cropId" class="form-control"></select>
                                <select id="varietie" name="varietieId" class="form-control"></select>
                                <input type="hidden" class="form-control croptype" name="croptype" value="">
                                <input type="hidden" class="form-control crop" name="crop" value="">
                                <input type="hidden" class="form-control varietie" name="varietie" value="">

                                <button id="doSearch" type="button" class="btn btn-success" title="筛选">
                                    <i class="fa fa-search"></i> 筛选
                                </button>
                                <!--<a href="{$currentUrl}?reset=1" class="btn btn-danger"><i class="fa fa-trash"></i> 清空</a>-->
                                <button type="reset" class="btn btn-danger" title="清空">
                                    <i class="fa fa-trash"></i> 清空
                                </button>
                            </div>
                        </form>
                    </div>
                    <div class="col-md-2">

                    </div>
                </div>
            </div>
            <div class="portlet-body">
                <form class="js-ajax-form" method="post">
                    <div class="">
                        <table id="data-table" class="table table-bordered table-hover dataTable">
                            <thead>
                                <th>分类</th>
                                <th>作物</th>
                                <th>品种</th>
                                <th>产量</th>
                                <th>操作</th>
                            </thead>
                        </table>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<input type="hidden" class="datalist_url" value="{:url('admin/'.strtolower($model).'/farmplantingList')}">
<input type="hidden" class="getcropcategory_url" value="{:url('admin/layer/getCropCategory')}">
{/block}

{block name="pagescript"}
<script src="__STATIC__/admin/pages/js/searcharea.js" type="text/javascript"></script>
<script>
    var datalist_url = $('.datalist_url').val();


    var initTable = function() {
        var param = {

        };

        var table = $('#data-table');

        if(table.length > 0){
            table.dataTable({
                "processing": true,
                "ordering": false, // 禁止排序
                serverSide: true,// 开启服务器模式
                "ajax": {
                    url: datalist_url,
                    data: param
                },
                "autoWidth": false,
                "columns": [
                    {"data": "croptypeName"},
                    {"data": "cropName"},
                    {"data": "varietieName"},
                    {"data": "expectedYield"},
                    {
                        "data": "null",
                        "render": function(data, type, row, meta) {
                            var html = '<button type="button" class="btn btn-success select-btn">选取</button>';

                            return html;
                        }
                    }
                ],
                "language": {
                    url: '/public/static/admin/pages/datatable_cn.json'
                },
                "lengthMenu": [[10, 20, 50, 100, 150], [10, 20, 50, 100, 150]],
                "pageLength": 10,
                "scrollX":"",
                "destroy": false,
                "stateSave": true,
                //"stateSave": false,
                "stateSaveParams": function (settings, data) {
                    var search = data.search.search;
                    //console.log(search);
                    if(search){
                        var arr = $.parseJSON(search);
                        for(var key in arr){
                            $("#searchForm input[name='"+key+"']").val(arr[key]);
                            $("#searchForm select[name='"+key+"']").val(arr[key]);
                        }
                    }
                },
                "dom": "<'row'<'.col-md-6 col-sm-12'><'col-md-6 col-sm-12'>r>" +
                "<t>" +
                "<'relative'<'col-md-5'i><'col-md-7'>lp>",
                "fnCreatedRow": function(nRow, aData, iDataIndex){
                    // 标识已选中数据
                    var currentId = $(parent.document).find('.plantingId').val();
                    if(currentId == aData['id']) {
                        $(nRow).find('.select-btn').prop('disabled', true);
                        $(nRow).find('.select-btn').attr('style', 'background:#5cb85c');
                    }
                },
                "fnInitComplete": function() {
                    //var nTrs = table.fnGetNodes();//fnGetNodes获取表格所有行，nTrs[i]表示第i行tr对象
                    var city = $('input[name=city]').val();
                    if(city){
                        //$("#city").find("option:contains('"+city+"')").attr("selected", true);
                        get_xian($("#city"));
                    }
                }
            });
        }

        // 筛选
        $('#doSearch').on('click', function(event){
            var param = $('#searchForm').serializeObject();

            tableSearch(table, param);
        });

        // 选取
        table.on('click', '.select-btn', function(event) {
            // 操作行对象
            var dataArr = table.DataTable().rows($(this).parents("tr")).data();
            var id = dataArr[0].id;
            var name = dataArr[0].varietieName;

            $(parent.document).find('.plantingId').val(id);
            $(parent.document).find('.select-farmplanting').text(name);

            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        });
    };

    var tableSearch = function(table, params) {

        table.DataTable().search(JSON.stringify(params)).draw();
    };

    $(function() {
        initTable();
    });


    var getcropcategory_url = $('.getcropcategory_url').val();

    if($('#croptype').length > 0){
        get_croptype();
    }

    // 选择分类
    $('#croptype').on('change', function () {
        get_crop($(this));
        $('input[name=croptype]').val($(this).find('option:selected').text());
    });

    // 选择作物
    $('#crop').on('change', function () {
        get_varietie($(this));
        $('input[name=crop]').val($(this).find('option:selected').text());
    });

    // 选择品种
    $('#varietie').on('change', function () {
        $('input[name=varietie]').val($(this).find('option:selected').text());
    });

    /**
     * 获取分类
     */
    function get_croptype() {
        $('#crop').html('<option value="">选择作物</option>');
        $('#varietie').html('<option value="">选择品种</option>');

        var url = getcropcategory_url + '?p_id=0';
        $.ajax({
            type : "GET",
            url  : url,
            //dataType:"json",
            error: function(request) {
                alert("服务器繁忙, 请联系管理员!");
                return false;
            },
            success: function(data) {
                var options = '<option value="">选择分类</option>'+ data;
                $('#croptype').empty().html(options);

                /*var croptype = $('input[name=croptype]').val();
                if(croptype){
                    $("#croptype").val(croptype);
                    get_crop($("#croptype"));
                }*/
            }
        });
        return false;
    }

    /**
     * 获取作物
     * @param select对象
     */
    function get_crop(obj) {
        var parent_id = $(obj).val();
        if(!parent_id){
            var options = '<option value="">选择品种</option>';
            $('#varietie').empty().html(options);
            return false;
        }
        $('#varietie').html('<option value="">选择品种</option>');

        var url = getcropcategory_url + '?p_id=' + parent_id;
        $.ajax({
            type : "GET",
            url  : url,
            //dataType:"json",
            error: function(request) {
                alert("服务器繁忙, 请联系管理员!");
                return false;
            },
            success: function(data) {
                var options = '<option value="">选择分类</option>'+ data;
                $('#crop').empty().html(options);

                /*var crop = $('input[name=crop]').val();
                if(crop){
                    $("#crop").val(crop);
                    get_crop($("#crop"));
                }*/
            }
        });
        return false;
    }

    /**
     * 获取品种
     * @param select对象
     */
    function get_varietie(obj) {
        var parent_id = $(obj).val();
        if(!parent_id){
            var options = '<option value="">选择品种</option>';
            $('#varietie').empty().html(options);
            return false;
        }

        var url = getcropcategory_url + '?p_id=' + parent_id;
        $.ajax({
            type : "GET",
            url  : url,
            //dataType:"json",
            error: function(request) {
                alert("服务器繁忙, 请联系管理员!");
                return false;
            },
            success: function(data) {
                var options = '<option value="">选择品种</option>'+ data;
                $('#varietie').empty().html(options);

                /*var varietie = $('input[name=varietie]').val();
                if(varietie){
                    $("#varietie").val(varietie);
                    //$("#varietie").find("option:contains('"+varietie+"')").attr("selected", true);
                }*/
            }
        });
        return false;
    }
</script>
{/block}